<!-- 添加迭代页面 -->
<template>
  <div>
    <view
      style="
        position: fixed;
        top: 0px;
        background-color: #fff;
        width: 100%;
        left: 0px;
        z-index: 10;
      "
    >
      <view :style="{ height: statusBarHeight + 'px' }" />
      <view class="nav-main" :style="{ height: navbarHeight + 'px' }">
        <slot name="left">
          <view class="left" :style="{ 'margin-top': navbarHeight / 2 + 'px' }">
            <image
              class="btn-icon"
              :src="require('@/static/project/back.png')"
              mode="scaleToFill"
              @click="back"
            />
            <view class="line" />
            <image
              class="btn-icon"
              :src="require('@/static/project/home.png')"
              mode="scaleToFill"
              @click="backHome"
            />
          </view>
          <view class="page-title">
            <span>添加里程</span>
          </view>
        </slot>
        <!-- <text class="title" style="text-align: center;">新建项目</text> -->
      </view>
      <view>
        <van-divider />
      </view>
    </view>
    <div
      class="person-info"
      :style="{
        'margin-top': statusBarHeight + navbarHeight + 28 + 'px',
        'padding-bottom': 4 + 'px',
      }"
    >
      <div class="personForm">
        <div style="border-bottom: 1px solid #f2f2f2">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 14px 16px;
              line-height: 14px;
            "
          >
            <div>
              <span>里程名称</span>
            </div>
            <div style="display: flex; align-items: center; column-gap: 5px">
              <input
                :value="formData.name"
                placeholder="请输入"
                style="text-align: right"
                placeholder-style="color: #999;"
                @input="projectChange"
              />
            </div>
          </div>
        </div>
        <div class="moreSty">
          <ze-commer v-model="formData.bm" label="商务负责人" />
        </div>
        <div class="moreSty">
          <ze-tech
            v-model="formData.cto"
            :options="swList"
            label="技术负责人"
          />
        </div>
        <div style="padding: 0px 16px;border-bottom: 1px solid #f2f2f2">
          <ze-datetime
            ref="projectBegin"
            v-model="formData.begin"
            label="计划开始时间"
          />
        </div>
        <div style="padding: 0 16px;border-bottom: 1px solid #f2f2f2">
          <ze-datetime
            ref="projectEnd"
            v-model="formData.end"
            label="计划结束时间"
          />
        </div>
        <div style="padding: 0px 16px;border-bottom: 1px solid #f2f2f2">
          <ze-datetime
            ref="projectRealbegin"
            v-model="formData.realBegin"
            label="实际开始时间"
          />
        </div>
        <div style="padding: 0px 16px;border-bottom: 1px solid #f2f2f2">
          <ze-datetime
            ref="projectRealend"
            v-model="formData.realEnd"
            label="实际结束时间"
          />
        </div>
        <div style="border-bottom: 1px solid #f2f2f2">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 14px 16px;
              line-height: 14px;
            "
          >
            <div>
              <span>里程状态</span>
            </div>
            <div
              style="display: flex; align-items: center; column-gap: 5px"
              @click="statusclick"
            >
              <input
                :value="formData.status"
                placeholder="请选择"
                style="text-align: right"
                placeholder-style="color: #999;"
                disabled
              />
              <van-icon name="arrow" color="#ECECEC" />
            </div>
          </div>
        </div>
        <div style="padding: 15px 16px">
          <div style="margin-top: 8px">
            <span>备注</span>
          </div>
          <div
            ref="divRef"
            style="
              height: 100px;
              background-color: #f9f8f8;
              margin-top: 10px;
              overflow-y: auto;
            "
          >
            <textarea
              ref="beizhuRef"
              v-model="formData.remark"
              class="textarea"
              style="height: 100px"
              placeholder="请输入"
              auto-height
              placeholder-style="color: #999;"
              @input="remarksChange"
            ></textarea>
          </div>
        </div>
      </div>
      <!-- <div class="infoBtn">
        <van-button size="large" :class="showSubmit ? 'submit' : 'noSubmit'" round @click="submitPerson">提交</van-button>
      </div> -->
      <div>
        <ze-submit @submit="submitPerson" />
      </div>
    </div>
    <van-toast id="van-toast" />
    <uni-popup ref="attributesPopup" type="bottom" background-color="#fff">
      <view class="popup-content2">
        <!-- <text class="title"> 选择状态 </text> -->
        <scroll-view scroll-y :scroll-top="scrollTop" class="list">
          <radio-group>
            <view
              v-for="(item, idx) in statusList"
              :key="item.value"
              class="li"
              style="display: flex;justify-content: space-between;padding: 8px 16px;line-height: 22px;max-height: 100px;overflow-y: auto;border-bottom: 1px solid #f2f2f2"
              @click="chooseAttribute(item, idx)"
            >
              <view>{{ item.label }}</view>
              <radio color="#899af4" :value="item.id" name="rdbtn" />
            </view>
          </radio-group>
        </scroll-view>
      </view>
    </uni-popup>
  </div>
</template>
<script>
// import selectDown from '@/pages/me/select-down.vue'
import { DICT_TYPE, getDictDatas } from '@/utils/dict'
import ZeSubmit from '@/components/ze-oa-form/ze-submit.vue'
// import ArrowRight from '@/components/ze-oa-form/cpns/arrow-right.vue'
import { addLiCheng } from '@/apis/licheng'
import { getDeviceInfo } from '@/utils/storage'
import Toast from '@/wxcomponents/vant/toast/toast'
import ZeCommer from '@/components/ze-pro-form/ze-commer/ze-commer.vue'
import ZeTech from '@/components/ze-pro-form/ze-tech/ze-tech.vue'
// import ZeMilestatus from '@/components/ze-pro-form/ze-milestatus/ze-milestatus.vue'
import ZeDatetime from '@/components/ze-oa-form/ze-datetime.vue'

export default {
  components: { ZeCommer, ZeTech, ZeDatetime, ZeSubmit },
  data() {
    return {
      // iteration: {
      //   projectName: '',
      //   executionName: '',
      //   executionCode: '',
      //   startTime: '',
      //   endTime: '',
      //   weekday: '',
      //   executeType: '',
      //   related: '',
      //   plan: '',
      //   teamName: '',
      //   copyTeam: '',
      //   productOwner: '',
      //   testLeader: '',
      //   teamMembers: '',
      //   iterationLeader: '',
      //   releaseLeader: '',
      //   executDescript: '',
      // },
      formData: {
        name: '',
        bm: '',
        cto: '',
        begin: '',
        end: '',
        realBegin: '',
        realEnd: '',
        status: '',
        remark: '',
      },
      // 里程状态
      statusList: getDictDatas(DICT_TYPE.MILE_STATUS),
      projectId: '',
      statusBarHeight: '0',
      navbarHeight: '0',
      showStartTime: false,
      showEndTime: false,
      showSubmit: false,
      // 所属项目list
      projectList: ['市政信息升级管理平台', '五图河APP', '中恩OA系统'],
      // 执行类型
      executeTypeList: ['类型一', '类型二'],
      // 关联产品list
      relatedList: ['产品一', '产品二'],
      // 学历
      planList: ['计划一', '计划二'],
      // 薪资
      copyTeamList: ['团队一', '团队二'],
      currentDate: new Date().getTime(),
      currentDates: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
    }
  },
  onLoad(options) {
    console.log(options, 'options项目id')
    this.projectId = options.projectId
    this.setHeight()
  },
  mounted() {
    this.$refs.projectBegin.$on('input', this.setBegin)
    this.$refs.projectEnd.$on('input', this.setEnd)
    this.$refs.projectRealbegin.$on('input', this.setBeginReal)
    this.$refs.projectRealend.$on('input', this.setEndReal)
    this.setFormData()
  },
  methods: {
    setFormData() {
      this.$nextTick(function() {
        const begin = uni.getStorageSync('begin_form')
        const end = uni.getStorageSync('end_form')
        const realbegin = uni.getStorageSync('realbegin_form')
        const realend = uni.getStorageSync('realend_form')
        this.formData.begin = begin
        this.formData.end = end
        this.formData.realBegin = realbegin
        this.formData.realEnd = realend
      })
    },
    // input点击
    statusclick() {
      // console.log('输入框点击')
      this.$refs.attributesPopup.open()
    },
    // 里程状态选中触发
    chooseAttribute(item, index) {
      // this.formData.status = index == '1' ? this.formData.status = '进行中' : this.formData.status = '已完成'
      this.formData.status = item.label
      this.$refs.attributesPopup.close()
      console.log(item)
      console.log(index)
    },
    // 设置高度
    setHeight() {
      const { statusBarHeight, navbarHeight } = getDeviceInfo()
      this.statusBarHeight = statusBarHeight
      this.navbarHeight = navbarHeight
    },
    // 返回上一级
    back() {
      // 清空缓存数据
      this.cleanStoragData()
      uni.navigateBack({
        delta: 1,
      })
    },
    // 返回主页
    backHome() {
      // 清空缓存数据
      this.cleanStoragData()
      uni.switchTab({
        url: '/pages/office/index/index',
      })
    },
    // 设置计划开始时间
    setBegin(begin) {
      uni.setStorageSync('begin_form', (this.formData.begin = begin))
    },
    // 设置计划结束时间
    setEnd(end) {
      uni.setStorageSync('end_form', (this.formData.end = end))
    },
    // 设置实际开始时间
    setBeginReal(realBegin) {
      uni.setStorageSync(
        'realbegin_form',
        (this.formData.realBegin = realBegin),
      )
    },
    // 设置实际结束时间
    setEndReal(realEnd) {
      uni.setStorageSync('realend_form', (this.formData.realEnd = realEnd))
    },
    // 项目名称输入值变动触发
    projectChange(event) {
      // console.log(event, '项目名称')
      uni.setStorageSync(
        'project_form',
        (this.formData.name = event.target.value),
      )
    },
    // 项目备注输入值变动触发
    remarksChange(event) {
      uni.setStorageSync(
        'remark_form',
        (this.formData.remark = event.target.value),
      )
    },
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '所属项目':
          this.iteration.projectName = val.value
          break
        case '执行类型':
          this.showSubmit = true
          this.iteration.executeType = val.value
          break
        case '关联产品':
          this.iteration.related = val.value
          break
        case '关联计划':
          this.iteration.plan = val.value
          break
        case '复制团队':
          this.iteration.copyTeam = val.value
          break
      }
    },
    // 返回上一页
    onClickLeft() {
      uni.navigateBack()
    },
    // 点击开始时间框
    clickStartTime() {
      this.showStartTime = true
    },
    // 取值开始时间
    onStartTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth
        = date.getMonth() + 1 < 10
          ? `0${date.getMonth() + 1}`
          : date.getMonth() + 1
      const Day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
      const GMT = `${Year}-${Moth}-${Day}`
      this.iteration.startTime = GMT
      this.showStartTime = false
    },
    // 取消开始时间
    onCancelStartTime() {
      this.showStartTime = false
    },
    // 点击完成时间框
    clickEndTime() {
      this.showEndTime = true
    },
    // 取值完成时间
    onEndTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth
        = date.getMonth() + 1 < 10
          ? `0${date.getMonth() + 1}`
          : date.getMonth() + 1
      const Day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
      const GMT = `${Year}-${Moth}-${Day}`
      this.iteration.endTime = GMT
      this.showEndTime = false
    },
    // 取消完成时间
    onCancelEndTime() {
      this.showEndTime = false
    },
    async submitPerson() {
      // const params = {
      //   ...this.formData,
      //   projectId: this.projectId,
      // }
      const comm = uni.getStorageSync('storage_comm')
      const tech = uni.getStorageSync('storage_tech')
      this.formData.bm = comm.commId
      this.formData.cto = tech.techId
      if (!this.formData.name) {
        uni.showToast({
          title: '里程名称不能为空',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      if (!this.formData.bm) {
        uni.showToast({
          title: '商务负责人不能为空',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      if (!this.formData.cto) {
        uni.showToast({
          title: '技术负责人不能为空',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      this.formData.projectId = this.projectId
      this.formData.status == '进行中' ? this.formData.status = '1' : this.formData.status = '2'
      console.log(this.formData, 'this.formData')
      const res = await addLiCheng(this.formData)
      if (res.code == 0 || res.code == 200) {
        uni.showToast({
          title: '新增里程成功!',
          icon: 'success',
          duration: 1500,
          success(res) {
            uni.navigateBack({
              delta: 1,
            })
          },
        })
        this.cleanStoragData()
      }
      // console.log(params, 'params')
      // const res = await addLiCheng(this.formData)
      // console.log(res, '新增里程')
      // uni.navigateBack({
      //   delta: 1,
      // })
      // if (this.iteration.projectName === undefined || this.iteration.projectName.trim().length === 0) {
      //   Toast('请选择所属项目')
      //   return
      // }
      // if (this.iteration.executionName === undefined || this.iteration.executionName.trim().length === 0) {
      //   Toast('请填写执行名称')
      //   return
      // }
      // if (this.iteration.executeType === undefined || this.iteration.executeType.trim().length === 0) {
      //   Toast('请选择执行类型')
      // }
      // uni.setStorageSync('person', this.iteration)
      // uni.navigateTo({
      //   url: '/package-guest/pages/info-regist/info-write/index',
      // })
    },
    // 清空缓存数据
    cleanStoragData() {
      // uni.removeStorageSync('storage_dept')
      uni.removeStorageSync('storage_comm')
      uni.removeStorageSync('storage_tech')
      uni.removeStorageSync('begin_form')
      uni.removeStorageSync('end_form')
      uni.removeStorageSync('realbegin_form')
      uni.removeStorageSync('realend_form')
    },
  },
}
</script>
<style lang="scss" scoped>
.nav-main {
  // position: relative;
  // position: fixed;
  // display: flex;
  // align-items: center;
  // text-align: center;
  .left {
    height: 32px;
    padding: 0 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 24rpx;
    // top: 50%;
    transform: translateY(-50%);
    border-radius: 32rpx;
    // border: 1px solid #e7ebee;

    .btn-icon {
      width: 48rpx;
      height: 48rpx;
    }

    .line {
      width: 2rpx;
      height: 18px;
      margin: 0 14rpx;
      background: #e7ebee;
    }
  }
  .page-title {
    text-align: center;
    height: 40px;
    line-height: 41px;
    font-weight: 500;
  }

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
  }
}
.person-info {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .personForm {
    width: 93%;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
  }
  .infoBtn {
    text-align: center;
    padding-top: 15%;
    padding-bottom: 10%;
    width: 80%;
  }
  .headSty {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0px 5px 0px 18px;
    .head-img {
      align-items: center;
      display: flex;
      img:nth-child(1) {
        width: 28px;
        height: 28px;
      }
      img:nth-child(2) {
        width: 16px;
        height: 16px;
      }
    }
  }
  .taskSty {
    padding: 10px 0px 0px 16px;
  }
}
</style>
<style lang="scss">
.evaluate {
  view .van-cell__title {
    display: none !important;
  }
  view .van-cell__value {
    height: 100px;
    background: #f9f8f8;
  }
  view .van-field__body--textarea {
    height: 100%;
  }
}
.moreSty {
  view {
    label {
      width: 100%;
      display: flex;
      white-space: nowrap;
    }
    input {
      padding-right: 8px;
      text-align: right;
    }
    textarea {
      height: 100% !important;
      padding-left: 8px;
      padding-top: 4px;
    }
  }
  .van-field__body {
    padding-right: 16px;
  }
}
.personForm {
  .van-cell {
    padding: 10px 5px 10px 2px !important;
  }
  .van-cell__title {
    padding-left: 16px;
  }
  .van-field__control {
    color: #999 !important;
    font-size: 12px;
  }
  .van-icon:before {
    color: #999;
  }
  .van-field__label {
    color: #333 !important;
    white-space: normal !important;
  }
}
.infoBtn {
  .noSubmit {
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #ccc !important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
  .submit {
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #029b00 !important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
}
</style>
